<template>
	<view class="template-pay tn-safe-area-inset-bottom" >
		<tn-nav-bar fixed :alpha="false" customBack backgroundColor="#DAE6FE"  >
			<text  style="font-size: 40rpx;font-weight: bold;">订单</text>
		</tn-nav-bar>
		<view style="margin-top: 100rpx;" class="search-box">
			<view class="search-box-input">
				<view class="tn-icon-search"></view>
				<input type="text" v-mode="keys" />
				<tn-button class="tn-button" backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm">搜索</tn-button>
			</view>
		</view>

		<view class="order-list-box" >
			<tn-subsection :list="list" style="box-shadow: 2rpx 3rpx 2rpx 1rpx rgba(0, 0, 0, 0.1);"></tn-subsection>
			<view class="order-list">
				<view class="box">
					<view class="box-title">
						<text style="width: 70%;font-size: 35rpx;font-weight: bold;opacity: 0.8;">单号：3303247</text>
						<tn-tag :backgroundColor="tagcolor" fontColor="#FFFFFF">挂账</tn-tag>
						<tn-tag :backgroundColor="tagcolor" fontColor="#FFFFFF" style="margin-left: 10rpx;">修车</tn-tag>
					</view>
					<view class="box-content">
						<view class="box-content-img">
							<img src="@/static/img/order/car.jpg" alt="widthFix" />
						</view>
						<view class="box-content-text">
							<text>车牌号：浙C74MA6</text>
							<text>车架号：330314545154515</text>
							<text>车主：张三</text>
						</view>
					</view>
					<view class="box-money">
						<view class="box-money-text">
							<text style="font-size: 45rpx;margin: 5rpx;"
								class="icon tn-icon-money tn-color-yellowgreen"></text>
							<text style="color: #37A1F4;">3000.00</text>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import componentsListData from '@/mock/components_page.js'
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'

	export default {
		name: 'Components',
		mixins: [template_page_mixin],

		filters: {
			titleFilter(value) {
				if (value.length === 0) {
					return ''
				}
				let newString = ''
				for (let i = 0; i < value.length; i++) {
					if (i !== 0) {
						newString += ' / '
					}
					newString += value[i]
				}
				return newString
			}
		},
		data() {
			return {
				// nav菜单列表
				list: ['全部', '挂账', '已结', '未结', '额外'],
				tagcolor: '#02BEFF',
				keys: ''
			}
		},
		methods: {
			getRandomCoolBg() {
				return this.$tn.color.getRandomCoolBgClass()
			},
			onChange(res) {
				this.startDate = res.startDate;
				this.endDate = res.endDate;
			}
		},
		mounted() {
			this.startDate = new Date().toISOString().slice(0, 10);
			this.endDate = new Date().toISOString().slice(0, 10);
		}
	}
</script>

<style lang="scss" scoped>
	/* 间隔线 start*/
	.tn-strip-bottom-min {
		width: 100%;
		border-bottom: 1rpx solid #F8F9FB;
	}

	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	.order-list-box {
		margin: 30rpx;

		.order-list {
			.box {
				border: 1rpx solid #e3e3e3;
				margin: 20rpx 0;
				padding: 20rpx 35rpx;
				border-radius: 10rpx;
				box-shadow: 2rpx 3rpx 2rpx 1rpx rgba(0, 0, 0, 0.1);

				.box-title {
					display: flex;
				}

				.box-content {
					display: flex;
					margin-top: 10rpx;

					.box-content-img {
						margin: 10rpx;
						width: 120rpx;
						height: 120rpx;

						img {
							border-radius: 20rpx;
							width: 120rpx;
							height: 120rpx;
						}
					}

					.box-content-text {
						display: grid;
						margin-left: 20rpx;

						text {
							font-size: 30rpx;
							font-weight: 500;
							opacity: 0.8;
						}
					}
				}

				.box-money {

					.box-money-text {
						font-size: 40rpx;
						text-align: right;
						font-weight: 800;
						margin: 0 10rpx;
					}
				}
			}
		}
	}

	/* 间隔线 end*/
	.search-box {
		margin: 10rpx 30rpx;
		border: #e3e3e3 solid 1rpx;
		border-radius: 10rpx;

		.search-box-input {
			display: flex;

			view {
				margin: 10rpx 20rpx;
				line-height: 40rpx;
			}

			input {
				line-height: 40rpx;
				margin: 10rpx 20rpx;
			}
			
			.tn-button{
				line-height: 40rpx;
				margin: 10rpx;
				margin-left: 60rpx;
			}
		}
	}
</style>